import React from "react"
import {Text as Label, TouchableHighlight, TouchableOpacity as Touch, View, TextInput} from "react-native"
import {Color, Lt, Jpp, Jx} from "./Jx"
import { Overlay } from "../script/_teaset"

// 自定义组件封装
// Text 可接受 null 数组 数字 无 undefined
// 不接受 object notdefined
export {Label, Touch}

// 弹框
const c_minOviewWidth = 300;
const c_minOviewHeight = 180;
const c_oviewBtnHeight = 60;
function renderOview(props, cond){
    let {style, children, ...other} = props;
    const styleRoot = {
        flex:1,
        justifyContent:"center", 
        alignItems:"center",
    }
    if(cond.isView){
        return <Overlay.View style={{...styleRoot, ...style}} {...other}>{children}</Overlay.View>;
    }
    style = {
        backgroundColor: "white", 
        borderRadius:Lt.radiu2, 
        minWidth:c_minOviewWidth, 
        minHeight:c_minOviewHeight, 
        padding: cond.isPad ? 20 : null,
        ...style,   
    }
    return <Overlay.View style = {styleRoot} {...other}>
        <View style = {style}>{children}</View>
    </Overlay.View> 
}

const isView = 1, isMsg = 1, isPad = 1;
class OviewView extends React.PureComponent{
    render(){
        return renderOview(this.props, {isView});
    }    
}
class OviewMsg extends React.PureComponent{
    render(){
        return renderOview(this.props, {isMsg});
    }
}
class OviewPad extends React.PureComponent{
    render(){
        return renderOview(this.props, {isPad});
    }
}
class ViewMsgUp extends React.PureComponent{
    render(){
        const {style, children, ...other} = this.props;
        return <View style = {{
            minHeight: c_minOviewHeight - c_oviewBtnHeight,
            justifyContent: "center",
            alignItems: "center",
            ...style,
        }} {...other}>
            {children}
        </View>
    }
}
export const Oview = Object.freeze({
    minWidth:c_minOviewWidth,
    minHeight:c_minOviewHeight,
    btnHeight:c_oviewBtnHeight,
    MsgUp:ViewMsgUp,
    View:OviewView,
    Msg:OviewMsg,
    Pad:OviewPad,
})

// 按钮
function renderButton(props, cond){
    let {style, title, children, ...other} = props;
    const c = Color.theme;
    const ic = Color.inverseTheme;
    const c14 = Lt.c14;
    const pad = Lt.pad;
    const borderRadius = cond.is1 ? 24 : parseInt(c14 / 2 + pad);
    style = {
        backgroundColor: cond.isPure ? c : Color.transparent,
        borderColor : cond.isBorder ? c : null,
        borderWidth : cond.isBorder ? 1 : null,
        borderRadius,
        minWidth : cond.is1 ? 48 : (c14 * 3 + pad * 2),
        width : (cond.is4 && (cond.isBorder || cond.isPure)) ? (c14 * 4 + pad * 2) : null,
        height : cond.is1 ? 48 : (c14 + pad * 2), 
        justifyContent : children ? null : "center",
        alignItems: children ? null : "center",
        ...style,
    };
    let {color, fontSize, fontWeight, ...style2} = style;
    if(cond.isFlex){
        let {minWidth, minHeight, width, height, justifyContent, alignItems, ...style3} = style2;
        // borderRadius 高亮圆角
        other = {style : {minWidth, minHeight, width, height, justifyContent, alignItems, 
            borderRadius, flex:1}, ...other};
        style2 = style3;
    }else{
        other = {style : style2, ...other};
    }
    color = color || (cond.isPure ? ic : c);
    if(cond.is1){
        style = {
            color,
            fontSize : fontSize || Lt.c20,
            fontWeight : fontWeight || "900",
        }
    }else{
        style = {
            color,
            fontSize,
            fontWeight, 
        }
    }

    children = children || <Label style={style}>{(title || "")}</Label>;
    if(cond.isFlex){
        return <View style = {{flexDirection:"row", margin:35, borderRadius, ...style2}}>
            <TouchableHighlight {...other}>
                {children}
            </TouchableHighlight>
        </View>;
    }
    return <TouchableHighlight {...other}>{children}</TouchableHighlight>;
}
const is1 = 1, is4 = 1, isBorder = 1, isPure = 1, isFlex = 1;
class Round extends React.PureComponent {
    render(){
        return renderButton(this.props, {is4:1});
    }
}
class RoundBorder extends React.PureComponent {
    render(){
        return renderButton(this.props, {is4, isBorder});
    }
}
class RoundPure extends React.PureComponent {
    render(){
        return renderButton(this.props, {is4, isPure});
    }
}
class Round2 extends React.PureComponent {
    render(){
        return renderButton(this.props, {});
    }
}
class RoundBorder2 extends React.PureComponent {
    render(){
        return renderButton(this.props, {isBorder});
    }
}
class RoundPure2 extends React.PureComponent {
    render(){
        return renderButton(this.props, {isPure});
    }
}
class Round1 extends React.PureComponent {
    render(){
        return renderButton(this.props, {is1});
    }
}
class RoundBorder1 extends React.PureComponent {
    render(){
        return renderButton(this.props, {is1, isBorder});
    }
}
class RoundPure1 extends React.PureComponent {
    render(){
        return renderButton(this.props, {is1, isPure});
    }
}
class FlexBorder extends React.PureComponent {
    render(){
        return renderButton(this.props, {is1, isFlex, isBorder});
    }
}
class FlexPure extends React.PureComponent {
    render(){
        return renderButton(this.props, {is1, isFlex, isPure});
    }
}
export const Button = Object.freeze({
    Round,
    Border:RoundBorder,
    Pure:RoundPure,
    Round2,
    Border2:RoundBorder2,
    Pure2:RoundPure2,
    Round1,
    Border1:RoundBorder1,
    Pure1:RoundPure1,
    FlexBorder,
    FlexPure,
});
// 输入框
function renderInput(props, cond){
    let {style, keyboardType, underlineColorAndroid, ...other} = props;
    underlineColorAndroid = underlineColorAndroid || Color.transparent;
    const c16 = Lt.c16;
    style = {
        borderRadius : Lt.radius, //(Jpp.inputHeight / 2),
        paddingLeft : 10,
        borderColor : Color.line,
        borderWidth : cond.isBorder ? 1 : null,
        borderBottomWidth : cond.isLine ? 1 : null,
        fontSize : c16,
        height : Jpp.isAndroid ? null : Jpp.inputHeight,
        ...style,
    };
    if(!keyboardType){
        keyboardType = cond.isNumber ? "numeric" : "default";
    }
    props = {style, keyboardType, underlineColorAndroid, ...other};
    return <TextInput {...props}/>
}
const isNumber = 1, isLine = 1;
class InputNumber extends React.PureComponent {
    render(){
        return renderInput(this.props, {isNumber});
    }
}
class InputNumberBorder extends React.PureComponent {
    render(){
        return renderInput(this.props, {isNumber, isBorder});
    }
}
class InputNumberLine extends React.PureComponent {
    render(){
        return renderInput(this.props, {isNumber, isLine});
    }
}
class InputDefault extends React.PureComponent {
    render(){
        return renderInput(this.props, {});
    }
}
class InputBorder extends React.PureComponent {
    render(){
        return renderInput(this.props, {isBorder});
    }
}
class InputLine extends React.PureComponent {
    render(){
        return renderInput(this.props, {isLine});
    }
}
export const Input = Object.freeze({
    Number:InputNumber,
    NumberBorder:InputNumberBorder,
    NumberLine:InputNumberLine,
    Default:InputDefault,
    Border:InputBorder,
    Line:InputLine,
});
